// Friend Add Card Component
import React from "react";
import { Image, Text, View } from "react-native";
import { getStyles } from "./index.style";
import { AddFriendButton, TempChatButton } from "./components";
import { UserProfileType } from "@/types/user-profile";
import useUserStateStore from "@/store/user-profile";
import { useTheme } from "@/contexts/ThemeContext";

export interface AddFriendCardProps {
  userInfo: UserProfileType;
  onPressAddFriend?: () => void;
  onPressTempChat?: () => void;
}

const AddFriendCard: React.FC<AddFriendCardProps> = ({
  userInfo: user,
  onPressAddFriend,
  onPressTempChat,
}) => {
  const currentUserId = useUserStateStore().state.currentUser.id;
  const { colors } = useTheme();
  const styles = getStyles(colors);

  return (
    <View style={styles.container}>
      {/* 顶部信息区域 */}
      <View style={styles.topSection}>
        <Image source={{ uri: user.avatar }} style={styles.avatar} />
        <View style={styles.identity}>
          <Text style={styles.nickname}>{user.nickname}</Text>
          <View style={styles.idRow}>
            <Text style={styles.wechatId}>Chat 账号: {user.uuid}</Text>
          </View>
        </View>
      </View>

      {/* 详细信息区域 */}
      <View style={styles.infoSection}>
        <View style={styles.infoItem}>
          <Text style={styles.infoLabel}>地区</Text>
          <Text style={styles.infoValue}>{user.region || "未设置"}</Text>
        </View>
        <View style={styles.infoItem}>
          <Text style={styles.infoLabel}>性别</Text>
          <Text style={styles.infoValue}>
            {user.gender === 1 ? "男" : user.gender === 2 ? "女" : "保密"}
          </Text>
        </View>
      </View>

      {/* 操作按钮区域 */}
      <View style={styles.actionSection}>
        <AddFriendButton
          onPress={onPressAddFriend}
          isCurrentUser={user.id === currentUserId}
          style={styles.primaryButton}
          textStyle={styles.primaryButtonText}
          iconColor={colors.button.primaryText}
        />
        <TempChatButton
          onPress={onPressTempChat}
          style={styles.secondaryButton}
          textStyle={styles.secondaryButtonText}
          iconColor={colors.button.secondaryText}
        />
      </View>
    </View>
  );
};

export default AddFriendCard;
